<template>
  <div class="new-wrapper">
    <div class="banner">
      <van-swipe
        vertical
        class="huli-wrapper"
        :autoplay="3000"
        :show-indicators="false"
      >
        <van-swipe-item v-for="(item,index) in bannerList.news.poster" :key="index">
          <img :src="item.picurl" alt="" srcset="">
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="new-tab-wrapper">
      <van-tabs swipeable v-model="active" @click="handleTabs" color="#4ECE40" title-active-color="#4ECE40" title-inactive-color="#999999">
        <van-tab :name="item.id" :title="item.name" v-for="item in navList" :key="item.id"></van-tab>
        <!-- <van-tab name="news2" title="新闻中心"></van-tab> -->
        <!-- <van-tab name="news3" title="科普知识"></van-tab> -->
      </van-tabs>

      <component v-bind:is="componentId" :newsInfo="newsInfo"></component>
      <van-pagination v-model="currentPage" @change="handlePage" :page-count="pageCount" mode="simple" />
    </div>

  </div>
</template>

<script>
import News1 from './components/news1.vue';
import News2 from './components/news2.vue';
import News3 from './components/news2.vue';
import News4 from './components/news2.vue';
import News5 from './components/news2.vue';
import { newsInfoService,tongzhiListService } from '@/service/user';
import { mapGetters } from 'vuex';
export default {
  data(){
    return {
      active: 0,
      currentPage: 1,
      pageCount: 0,
      staticPath: process.env.VUE_APP_STATIC_PATH,
      newsInfo: {},
      navList: [],
      componentId: 'news1'
    }
  },
  created(){
    this.fetchNav()
    let params = {
      page: this.currentPage
    }
    this.fetchNews(params)
    this.$store.dispatch('app/setBannerAction',{})
  },
  computed: {
    ...mapGetters(['bannerList']),
  },
  methods:{
    async fetchNav(){
      let result = await tongzhiListService();
      if(result.status == 200){
        this.navList = result.data
        this.active = result.data[0].id
      }
    },
    handleTabs(name,title){
      console.log(name,'tabs',title,'title')
      this.active = name;
      this.componentId = this.navList.filter(item => item.id === name)[0].action;
      this.currentPage = 1;
      let params = {
        page: this.currentPage
      }
      this.fetchNews(params)
    },
    async fetchNews(params){
      params.catid = this.active;
      let result = await newsInfoService(params);
      if(result.status == 200){
        this.newsInfo = result.data.model
        this.currentPage = result.data._meta.currentPage
        this.pageCount = result.data._meta.pageCount
      }else{
        this.$toast(result.message)
      }
    },
    handlePage(){
      let params = {
        page: this.currentPage
      }
      this.fetchNews(params)
    }
  },
  components:{
    News1,
    News2,
    News3,
    News4,
    News5,
  }
};
</script>

<style lang="less">
.new-wrapper{
  .banner{
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .news-list{
    background: #f5f5f5;
    padding-top: 10px;
    li{
      background: #fff;
      padding: 0 10px;
      a{
        padding: 10px 0;
        border-radius: 5px;
        .date{
          border-radius: 5px;
        }
      }
    }
  }
}
</style>